<script setup lang="ts">
import {nextTick, ref, shallowRef, watch} from "vue";
const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})

const chartRef = shallowRef()

let weekday:any[] = [];
let weatherDaylist:any[] = [];
let weatherNightlist:any[] = [];
let weatherZgwdlist:any[] = [];
let weatherZdwdlist:any[] = [];

let maxWD = 30;
let minWD = 0;

watch(()=>props.data, (val)=>{
  weekday = []
  weatherDaylist = []
  weatherNightlist = []
  weatherZgwdlist = []
  weatherZdwdlist = []
  props.data.forEach((item:any) => {
    weekday.push(item.week);
    weekday = weekday.map((v:any)=>v.replace('星期','周'))
    weekday[0] = '今日'
    weatherDaylist.push(item.text_day);
    weatherNightlist.push(item.text_night);
    weatherZgwdlist.push(item.high);
    weatherZdwdlist.push(item.low);
  });

  maxWD = Math.max(...weatherZgwdlist) + 30;
  minWD = Math.min(...weatherZdwdlist) - 30;

  setOption()
})

const option = ref<any>({})

const setOption = async () => {
  option.value = {
    title: {
      text: '七日天气',
      show: false,
    },
    legend: {
      show: false
    },
    grid: {
      show: true,
      backgroundColor: "transparent",
      opacity: 0.3,
      borderWidth: "0",
      top: "30%",
      bottom: "30%"
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        z: 0, // 层级（权重）
        triggerOn: 'click',
        lineStyle: {
          type: 'solid', // 将虚线改为实线
          width: 80, // 设置背景的宽度
          cap: 'square',
          opacity: 1,
          color: 'white', // 设置背景颜色为白色
          shadowBlur: 10, // 阴影模糊度
          shadowColor: 'rgba(251, 45, 25, 0.50)', // 阴影颜色
          shadowOffsetX: 0, // 水平方向阴影偏移距离
          // shadowOffsetY: 5
        }
      },
    },
    xAxis: [
      {
        type: "category",
        position: "top",
        offset: 0,
        boundaryGap: false,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: ["{a|{value}}"].join("\n"),
          rich: {
            a: {
              color: '#1A1A1A',
              fontSize: 14
            }
          }
        },
        nameTextStyle: {
          fontWeight: "bold",
          fontSize: 19
        },
        data: weatherDaylist,
        axisPointer: {
          show: false
        }
      },
      {
        type: "category",
        boundaryGap: false,
        position: "bottom",
        offset: 0,
        zlevel: 100,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          formatter: ["{a|{value}}"].join("\n"),
          rich: {
            a: {
              color: '#1A1A1A',
              fontSize: 14
            }
          }
        },
        nameTextStyle: {},
        data: weekday
      },
    ],
    yAxis: {
      show: false,
      interval: 15,
      type: "value",

      axisLabel: {
        formatter: "{value}" + "℃"
      },
      max: maxWD,
      min: minWD
    },
    series: [{
      name: "最高温度",
      type: "line",
      data: weatherZgwdlist,
      symbol: "circle",
      symbolSize: 5,
      showSymbol: true,
      smooth: true,
      label: {
        show: true,
        position: 'top',
        distance: 5,
        formatter: (v:any) => {
          return v.value + '°'
        },
        color: "#1A1A1A",
        fontSize: 14,
        fontWeight: 600
      },
      itemStyle: {
        color: '#ffffff', // 设置圆形的填充色
        borderColor: '#FB2D19', // 设置边框颜色
        borderWidth: 2 // 设置边框宽度
      },
      lineStyle: {
        width: 2, // 设置折线的宽度
        color: '#FB2D19', // 设置折线的颜色
        shadowColor: '#FB2D19', // 线的阴影颜色
        shadowBlur: 5, // 线的阴影模糊级数
        shadowOffsetX: 0, // 线的阴影水平偏移
        shadowOffsetY: 5 // 线的阴影垂直偏移
      },
      silent: false
    },
      {
        name: "最低温度",
        type: "line",
        data: weatherZdwdlist,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: true,
        smooth: true,
        label: {
          show: true,
          position: 'bottom',
          distance: 5,
          formatter: (v:any) => {
            return v.value + '°'
          },
          color: "#1A1A1A",
          fontSize: 14,
          fontWeight: 600
        },
        itemStyle: {
          color: '#fff', // 设置圆形的填充色
          borderColor: '#2E9AFE', // 设置边框颜色
          borderWidth: 2 // 设置边框宽度

        },
        lineStyle: {
          width: 2, // 设置折线的宽度
          color: '#2E9AFE', // 设置折线的颜色
          shadowColor: '#2E9AFE', // 线的阴影颜色
          shadowBlur: 5, // 线的阴影模糊级数
          shadowOffsetX: 0, // 线的阴影水平偏移
          shadowOffsetY: 5 // 线的阴影垂直偏移

        },
        silent: false
      },
    ]
  }
await nextTick()
  chartRef.value.dispatchAction({
    type: 'showTip',
    seriesIndex: 0,
    dataIndex:0
  })
}
</script>

<template>
  <div class="pl-[41px] pr-[41px] mt-[-20px]">
    <v-chart ref="chartRef" class="chart" :option="option"/>
  </div>
</template>

<style scoped lang="scss">
.chart{
  width: 100%;
  height: 240px;
}
</style>
